﻿@{
    Layout = null;
    var user = ViewBag.User as Users;
}
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>道隐论道</title>
    <!-- Favicon -->
    <link rel="icon" href="/dist/media/img/favicon.png" type="image/png">
    <!-- Bundle Styles -->
    <link rel="stylesheet" href="/vendor/bundle.css">
    <link rel="stylesheet" href="/vendor/enjoyhint/enjoyhint.css">
    <!-- App styles -->
    <link rel="stylesheet" href="/dist/css/app.min.css">
</head>
<body>
    <input id="account" type="hidden" value="@user?.Account" />
    <input id="nickName" type="hidden" value="@user?.NickName" />
    <!-- page loading -->
    <div class="page-loading"></div>
    <!-- ./ page loading -->
    <!-- page tour modal -->
    <div class="modal fade" id="pageTour" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-zoom" role="document">
            <div class="modal-content">
                <div class="modal-body text-center pt-5">
                    <div class="row">
                        <div class="col-md-6 offset-3">
                            <figure>
                                <img src="/dist/media/svg/undraw_product_tour_foyt.svg" class="img-fluid" alt="image">
                            </figure>
                            <p class="lead mt-5">是否须要引导?</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-primary start-tour">引导</button>
                    <button type="button" class="btn btn-link" data-dismiss="modal" aria-label="Close">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- ./ page tour modal -->
    <!-- disconnected modal -->
    <div class="modal fade" id="disconnected" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-zoom" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row mb-5">
                        <div class="col-md-6 offset-3">
                            <img src="/dist/media/svg/undraw_warning_cyit.svg" class="img-fluid" alt="image">
                        </div>
                    </div>
                    <p class="lead text-center">断开</p>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-success btn-lg">重连</button>
                    <a href="javascript:void(0)" class="btn btn-link bt_exit">退出</a>
                </div>
            </div>
        </div>
    </div>

    <!-- layout -->
    <div class="layout">

        <!-- navigation -->
        <nav class="navigation">
            <div class="nav-group">
                <ul>
                    <li class="logo">
                        <a href="#">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                 width="612px" height="612px" viewBox="0 0 612 612"
                                 style="enable-background:new 0 0 612 612;" xml:space="preserve">
                            <g>
                            <g id="_x32__26_">
                            <g>
                            <path d="M401.625,325.125h-191.25c-10.557,0-19.125,8.568-19.125,19.125s8.568,19.125,19.125,19.125h191.25
                                    c10.557,0,19.125-8.568,19.125-19.125S412.182,325.125,401.625,325.125z M439.875,210.375h-267.75
                                    c-10.557,0-19.125,8.568-19.125,19.125s8.568,19.125,19.125,19.125h267.75c10.557,0,19.125-8.568,19.125-19.125
                                    S450.432,210.375,439.875,210.375z M306,0C137.012,0,0,119.875,0,267.75c0,84.514,44.848,159.751,114.75,208.826V612
                                    l134.047-81.339c18.552,3.061,37.638,4.839,57.203,4.839c169.008,0,306-119.875,306-267.75C612,119.875,475.008,0,306,0z
                                    M306,497.25c-22.338,0-43.911-2.601-64.643-7.019l-90.041,54.123l1.205-88.701C83.5,414.133,38.25,345.513,38.25,267.75
                                    c0-126.741,119.875-229.5,267.75-229.5c147.875,0,267.75,102.759,267.75,229.5S453.875,497.25,306,497.25z" />
                                    </g>
                                </g>
                            </g>  
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                        </svg>
                        </a>
                    </li>
                    <li>
                        <a class="active" data-navigation-target="chats" href="#" data-toggle="tooltip" title="聊天"
                           data-placement="right">
                            <span class="badge badge-warning"></span>
                            <i data-feather="message-circle"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="dark-light-switcher" data-toggle="tooltip" title="夜间模式"
                           data-placement="right">
                            <i data-feather="moon"></i>
                        </a>
                    </li>
                    <li data-toggle="tooltip" title="用户菜单" data-placement="right">
                        <a href="/Users/login" data-toggle="dropdown">
                            <figure class="avatar">

                                <span class="avatar-title bg-info rounded-circle">@user?.NickName.Substring(0,1)</span>

                            </figure>
                        </a>
                        <div class="dropdown-menu">
                            @*    <a href="#" class="dropdown-item" data-toggle="modal" data-target="#editProfileModal">
                            编辑
                            </a>*@
                            <a href="#" class="dropdown-item" data-navigation-target="contact-information">个人信息</a>
                            @*  <a href="#" class="dropdown-item" data-toggle="modal" data-target="#settingModal">设置</a>*@
                            <div class="dropdown-divider"></div>
                            <a href="javascript:void(0)" class="dropdown-item text-danger bt_exit">退出</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- ./ navigation -->
        <!-- content -->
        <div class="content">

            <!-- sidebar group -->
            <div class="sidebar-group">

                <!-- Chats sidebar -->
                <div id="chats" class="sidebar active">
                    <header>
                        <span>道友列表</span>

                    </header>
                    <div class="sidebar-body">
                        <ul class="list-group list-group-flush">
                            @*         <li class="list-group-item">
                            <div>
                            <figure class="avatar">
                            <span class="avatar-title bg-info rounded-circle">A</span>
                            </figure>
                            </div>
                            <div class="users-list-body">
                            <div>
                            <h5 class="text-primary">Townsend Seary</h5>
                            <p>
                            <i class="fa fa-camera mr-1"></i> Photo
                            </p>
                            </div>

                            </div>
                            </li>      *@

                        </ul>
                    </div>
                </div>

            </div>
            <!-- ./ sidebar group -->
            <!-- chat -->
            <div class="chat">
                <div class="chat-header">
                    <div class="chat-header-user">

                        <div>
                            <h4>论道台</h4>

                        </div>
                        <div style="margin-left:50px;">
                            <button class="btn btn-danger" id="bt_clearmsg" type="submit">清空消息</button>

                        </div>

                    </div>

                </div>
                <div class="chat-body">
                    <div class="messages">
                        @* <div class="message-item outgoing-message">
                                <div class="message-avatar">
                                <figure class="avatar">
                                <img src="/dist/media/img/women_avatar5.jpg" class="rounded-circle" alt="image">
                                </figure>
                                <div>
                                <h5>Mirabelle Tow</h5>
                                <div class="time">01:20 PM <i class="ti-double-check text-info"></i></div>
                                </div>
                                </div>
                                <div class="message-content">
                                Hello how are you?
                                </div>
                                </div>
                                <div class="message-item">
                                <div class="message-avatar">
                                <figure class="avatar">
                                <img src="/dist/media/img/man_avatar3.jpg" class="rounded-circle" alt="image">
                                </figure>
                                <div>
                                <h5>Byrom Guittet</h5>
                                <div class="time">01:35 PM</div>
                                </div>
                                </div>
                                <div class="message-content">
                                I'm fine, how are you 😃
                                </div>
                        </div>*@

                    </div>
                </div>
                <div class="chat-footer">
                    <form>
                        <div>
                            <button class="btn btn-light mr-3" data-toggle="tooltip" title="Emoji" type="button">
                                <i data-feather="smile"></i>
                            </button>
                        </div>
                        <input id="in_message" type="text" class="form-control" placeholder="输入消息">
                        <div class="form-buttons">
                            <button class="btn btn-light" data-toggle="tooltip" title="添加文件" type="button">
                                <i data-feather="paperclip"></i>
                            </button>
                            <button class="btn btn-light d-sm-none d-block" data-toggle="tooltip"
                                    title="语音" type="button">
                                <i data-feather="mic"></i>
                            </button>
                            <button class="btn btn-primary" id="bt_send" type="submit">
                                <i data-feather="send"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- ./ chat -->

            <div class="sidebar-group">
                <div id="contact-information" class="sidebar">
                    <header>
                        <span>简介</span>
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <a href="#" class="btn btn-outline-light text-danger sidebar-close">
                                    <i data-feather="x"></i>
                                </a>
                            </li>
                        </ul>
                    </header>
                    <div class="sidebar-body">
                        <div class="pl-4 pr-4">
                            <div class="text-center">
                                <figure class="avatar avatar-xl mb-4">
                                    <span class="avatar-title bg-info rounded-circle">@user?.NickName.Substring(0,1)</span>
                                </figure>
                                <h5 class="mb-1">@user?.NickName</h5>
                                <small class="text-muted font-italic">@user?.Account</small>
                                <p>@user?.Remarks</p>
                                <p>@user?.CreateTime.ToString("yyyy/MM/dd HH:mm:ss")</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- ./ content -->
        
    </div>
    <!-- ./ layout -->
    <!-- Bundle -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/signalr/dist/browser/signalr.js"></script>
    <script src="/vendor/bundle.js"></script>
    <script src="/vendor/feather.min.js"></script>
    <script src="/vendor/enjoyhint/enjoyhint.min.js"></script>
    <!-- App scripts -->
    <script src="/dist/js/app.min.js"></script>
    <!-- Examples -->
    <script src="/dist/js/examples.js"></script>
    <script src="/js/crypto-js.min.js"></script>
    <script src="/js/des.js"></script>
    <script>
        //刷新列表

        const connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
        const userdom = {
            userlist: function () {
                var userlist = [];
                $.ajax({
                    type: 'post',
                    url: '/Users/getUserList',
                    async: false,
                    dataType: 'json',
                    success: function (rt) {
                        if (rt.code == 200) {
                            userlist = rt.data
                        }
                    }
                });
                return userlist;
            },
            userInit: function () {

                $(".list-group-flush").empty();
                var list = userdom.userlist();
                if (list) {
                    $.each(list, function (index, item) {

                        var sb = ' <li class="list-group-item">';
                        sb += "<div>";
                        sb += '<figure class="avatar">' + '  <span class="avatar-title bg-info rounded-circle">' + userdom.getNamefist(item.NickName) + '</span>' + ' </figure>';
                        sb += "</div>";
                        sb += '<div class="users-list-body">';
                        sb += ' <div>';
                        sb += '<h5 class="text-primary">' + item.NickName + '</h5>';
                        sb += '<p><i class="fa fa-address-card mr-1"></i>' + item.Account + '</p>';
                        sb += ' </div>';
                        sb += " </div></li>";
                        $(".list-group-flush").append(sb);
                    });

                }



            }, getNamefist: function (name) {

                var result = "";
                if (name) {
                    result = name.charAt(0);
                }
                return result;
            }
        };
                // 过滤所有 HTML 标签
        function filterHTML(html) {
            return html.replace(/<[^>]+>/g, '');
        }

        // 过滤特定标签（如 script/style）
        function filterScripts(html) {
            return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
        }
        $(document).ready(function () {
            setInterval(userdom.userInit, 3000);
            var user = document.getElementById("account").value;
            var nickName = $("#nickName").val();
            //接收消息
            connection.on("ReceiveMessage", function (_user, _nickName, message) {
                var mestype = "outgoing-message";
                if (_user != user) {
                    mestype = "";
                }
                message = des.decryptByDES(message);
                SohoExamle.Message.add(_nickName,filterHTML(filterScripts(message)), mestype);
               
            });
            document.getElementById("bt_send").disabled = true;
            connection.start().then(function () {
                document.getElementById("bt_send").disabled = false;
                connection.invoke("SendUser", user).catch(function (err) {
                    return console.error(err.toString());
                });

            }).catch(function (err) {
                return console.error(err.toString());
            });
            //重连方法
            const startSignalRConnection = connection => connection.start()
                .then(() => {
                    connection.invoke("SendUser", user).catch(function (err) {
                        return console.error(err.toString());
                    });
                    console.info("重连成功！");
                })
                .catch(err => console.error('SignalR Connection Error: '+err));
            //链接断开，尝试重连
            connection.onclose(() => setTimeout(startSignalRConnection(connection), 5000));
            //发消息
            $("#bt_send").click(function (event) {
                var message = $("#in_message").val();
                message = des.encryptByDES(message);
                connection.invoke("SendMessage", user, nickName, message).catch(function (err) {
                    return console.error(err.toString());
                });
                $("#in_message").val("");
                event.preventDefault();
            });

            $("#bt_clearmsg").click(function () {

                $(".messages").empty();
                $("#in_messag").focus();
            });

            $(".bt_exit").click(function(){

                $.ajax({
                    type: 'post',
                    url: '/Users/exit',
                    async: false,
                    dataType: 'json',
                    success: function (rt) {
                       location.href="/Users/login";
                    }
                });
            });
        });
    </script>
</body>
</html>